<template>
	<div>

		<div class="app-container">

			<TopInfo />

			<!-- <Search :lookup="data.lookup" @investigate="inves" /> -->

			<el-button type="primary" size="small" @click="bindrole">
				<template #default>
					<span class="text-sm">{{ $t('machine.types.roles') }}</span>
				</template>
			</el-button>

			<el-button type="danger" size="small" @click="relieve('')">
				<template #default>
					<span class="text-sm">{{ $t('account.organization.unBind') }}</span>
				</template>
			</el-button>

		</div>

		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" />

				<el-table-column prop="or_id" label="ID" />

				<el-table-column prop="name" :label="$t('account.organization.permRole')">
					<template #default="scope">
						{{ scope.row.name || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="is_del" :label="$t('account.organization.isDelete')">
					<template #default="scope">
						<el-tag v-if="scope.row.is_del == 1" type="danger">{{ $t('public.yes') }}</el-tag>
						<el-tag v-if="scope.row.is_del == 2" type="success">{{ $t('public.no') }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="create_time" :label="$t('date.createTime')">
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.create_time, 3) }}
					</template>
				</el-table-column>

				<el-table-column :label="$t('public.operate')">
					<template #default="scope">
						<el-button type="danger" size="small" @click="relieve(scope.row.role_id)">
							{{ $t('public.relieve') }}
						</el-button>
					</template>
				</el-table-column>

			</el-table>

			<PageNum :total="data.total" :page="data.userole" @exposeData="current" @fraction="fraction" />

		</div>

		<el-dialog v-model="data.previewShow" :title="$t('machine.types.roles')" center width="700px" destroy-on-close>
			<el-form :model="data.info" class="w-full" label-width="120">
				<el-form-item :label="$t('account.organization.permRole') + ':'" prop="roleList" class="w-11/12">
					<el-select v-model="data.info.roleList" clearable multiple filterable
						:placeholder="$t('message.pleaseSelect')">
						<el-option v-for="item in data.authority" :key="item.role_id"
							:label="item.role_id + ' - ' + item.name" :value="item.role_id" />
					</el-select>
				</el-form-item>

				<div class="w-2/4 text-center">
					<div class="inline-block">
						<el-button type="primary" @click="submit(1)">{{ $t('public.save') }}</el-button>
						<el-button @click="data.previewShow = false">{{ $t('public.cancel') }}</el-button>
					</div>
				</div>

			</el-form>
		</el-dialog>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import { getorganizationroleList, getauthroleList, bindorganizationrole } from '@/api/account';
import { useRoute } from "vue-router";
const route = useRoute()
let data = reactive({
	mtloading: false, // 加载
	previewShow: false, // 弹窗
	list: [], // 列表信息
	roleList: [], // 选中的角色
	authority: [], // 权限角色列表
	info: { // 绑定角色
		ao_id: '',
		roleList: []
	},
	userole: { // 筛选数据
		ao_id: '',
		role_id: '',
		// is_del:'',
		page:1,
		pageNum:15,
	},
	total:0, // 总条数
})

// 获取列表信息
let getinfo = () => {
	data.mtloading = true
	getorganizationroleList(data.userole).then(res => {
		data.mtloading = false
		if (res.state == 200 &&  res.data) {
			data.list = res.data.data
			data.total = res.data.total
		}
	}).catch(err => {
		data.list = []
		data.mtloading = false
	})
}

// 获取接口数据
let geturl = () => {
	let id = JSON.parse(decodeURI(route.query.l)).info
	data.info.ao_id = id
	data.userole.ao_id = id

	getauthroleList().then(res => {
		if (res.state == 200) {
			data.authority = res.data
		}
	})
}

// 绑定角色
let bindrole = () => {
	data.info.roleList = []
	data.previewShow = true
}

// 选中角色
let handleSelectionChange = (e) => {
	data.roleList = []
	for (let item of e) {
		data.roleList.push(item.role_id)
	}
}

// 确认绑定/解除
let submit = (e) => {
	let roleList = []
	let list = []

	for (let item of data.list) {
		list.push(item.role_id)
	}

	if (e == 1) {
		// 绑定
		list = [...list, ...data.info.roleList]
		// 去除重复的数据
		roleList = [...new Set(list)]
	} else {
		// 解除
		// 筛选出两个数组中不同的值
		roleList = list.filter(item => data.info.roleList.indexOf(item) === -1)
	}

	let obj = {
		ao_id: data.info.ao_id,
		roleList: roleList.join(',')
	}

	bindorganizationrole(obj).then(res => {
		if (res.state == 200) {
			if (res.state == 200) {
				ElMessage({
					message: $t('message.setSuccess'),
					type: 'success'
				})
				data.previewShow = false
				getinfo()
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}
	})

}

// 解除绑定
let relieve = (e) => {
	if (e != '') {
		data.roleList = [e]
	}
	if (data.roleList.length == 0) {
		ElMessage({
			message: $t('message.selectRole'),
			type: 'error'
		})
		return
	}
	data.info.roleList = data.roleList
	submit(2)
}

// 查询回调
let inves = (e) => {
	// data.userole.is_del = e.is_del
	// data.userole.page = 1
	// data.userole.pageNum = 15
	// getinfo()
}

// 页数回调
let current = (e) => {
	// 	data.userole.page = e
	// 	getinfo()
}

// 条数回调
let fraction = (e) => {
	// 	data.userole.pageNum = e
	// 	getinfo()
}

geturl()
getinfo()

</script>